<template>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :span="10">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="color"
            aign="center"
            label="颜色/尺码："
            width="180">
            <template slot-scope="scope">
              {{scope.row.color==='gray'?'灰色':(scope.row.color==='red'?'红色':'黄色')}}
            </template>
          </el-table-column>
          <el-table-column
            aign="center"
            label="M">
            <template slot-scope="scope">
              <el-input @blur="inputblur(scope,'middle')"  v-model="showdata[scope.row.color].middle" :placeholder="String(scope.row.middle)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            aign="center"
            label="L">
            <template slot-scope="scope">
              <el-input @blur="inputblur(scope,'large')" v-model="showdata[scope.row.color].large" :placeholder="String(scope.row.large)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            aign="center"
            label="S">
            <template slot-scope="scope">
              <el-input @blur="inputblur(scope,'small')" v-model="showdata[scope.row.color].small" :placeholder="String(scope.row.small)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            aign="center"
            label="小计">
            <template slot-scope="scope">
              {{scope.row.color=='gray'?graycount:(scope.row.color=='yellow'?yellowcount:redcount)}}
            </template>
          </el-table-column>
        </el-table>
        <div style="padding:20px;">
          {{'总件数:'+(isNaN(redcount+graycount+yellowcount)?0:redcount+graycount+yellowcount)+'，总金额:￥'+(100*(isNaN(redcount+graycount+yellowcount)?0:redcount+graycount+yellowcount))+'元。'}}<el-button type="primary" :disabled="isdone">提交</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {data} from './assets/js/data.js'
export default {
  name: 'app',
  data () {
    return {
      redmiddle:false,
      showdata:{
        red:{
          middle:'',
          large:'',
          small:'',
          count:0
        },
        gray:{
          middle:'',
          large:'',
          small:'',
          count:0
        },
        yellow:{
          middle:'',
          large:'',
          small:'',
          count:0
        }
      },
      tableData: [],
      input:'',
    }
  },
  computed:{
    isdone(){
      return (this.redcount+this.graycount+this.yellowcount)>0?false:true
    },
    redcount(){
      return isNaN(Number(this.showdata.red.large)+Number(this.showdata.red.middle)+Number(this.showdata.red.small))?0:Number(this.showdata.red.large)+Number(this.showdata.red.middle)+Number(this.showdata.red.small)
    },
    graycount(){
      return isNaN(Number(this.showdata.gray.large)+Number(this.showdata.gray.middle)+Number(this.showdata.gray.small))?0:Number(this.showdata.gray.large)+Number(this.showdata.gray.middle)+Number(this.showdata.gray.small)
    },
    yellowcount(){
      return isNaN(Number(this.showdata.yellow.large)+Number(this.showdata.yellow.middle)+Number(this.showdata.yellow.small))?0:Number(this.showdata.yellow.large)+Number(this.showdata.yellow.middle)+Number(this.showdata.yellow.small)
    }
  },
  methods:{
    inputblur(val,type){
      console.log(this.showdata[val.row.color][type])
      if(this.showdata[val.row.color][type]<0||isNaN(Number(this.showdata[val.row.color][type]))){
        this.showdata[val.row.color][type]=0
        event.srcElement.focus()
        this.$notify.error({
          title: '错误',
          message: '非法数据'
        });
        return false
      }
      if(this.showdata[val.row.color][type]>val.row[type]){
        this.showdata[val.row.color][type]=0
        event.srcElement.focus()
        this.$notify.error({
          title: '错误',
          message: '不能超过库存最大数'+val.row[type]
        });
      }
      if(this.showdata[val.row.color][type]!==''){
        this.showdata[val.row.color][type]=Number(this.showdata[val.row.color][type])
      }
    }
  },
  created(){
    this.tableData=data[0].details
    console.log(isNaN(Number('9')))
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
